<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
		<title>博客首页</title>
		<link href="../../plugin/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
		<link href="./css/animate.css" type="text/css" rel="stylesheet" />
		<link href="./css/common.css" type="text/css" rel="stylesheet" />
		<style>
			.glyphicon{margin-right:10px;}
		</style>
		<script src="../../plugin/jquery/jquery.min.js"></script>
		<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
		<script src="./js/getLocalstorage.js" ></script>
		<!--[if lt IE 9]>
		    <script src="plugins/html5shiv/html5shiv.min.js"></script>
		    <script src="plugins/respond/respond.min.js"></script>
		<![endif]-->
	</head>
	<body id="indexPage" class="index-body" style="overflow: hidden;">
		<input type="checkbox" id="asideControler" class="hide" />
		<header id="header">
			<nav class="navbar navbar-fixed-top self-bc-color">
				<div class="container-fluid"> 
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
							<span class="sr-only self-textbc-color">切换导航</span>
							<span class="icon-bar self-textbc-color"></span>
							<span class="icon-bar self-textbc-color"></span>
							<span class="icon-bar self-textbc-color"></span>
						</button>
						<a class="navbar-brand animated rotateIn self-text-color" href="#">博客</a>
					</div>
					<div class="collapse navbar-collapse animated fadeInRightBig" id="example-navbar-collapse">
						<ul id="navList" class="nav navbar-nav navbar-right">
							<li class="active"><a class="self-text-color" href="javascript:void(0)" onclick="getPage(this,'page/home.html')"><i class="glyphicon glyphicon-home"></i>首页</a></li>
							<li><a class="self-text-color" href="javascript:void(0)" onclick="getPage(this,'page/changeStyle.html')"><i class="glyphicon glyphicon-cog"></i>设置</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<aside id="aside" class="hidden-xs self-bc-color">
			<div class="aside-inner clearfix text-center">
				<div class="col-xs-6 col-xs-offset-3 text-center aside-logo animated fadeInDownBig">
			        <img class="img-circle img-responsive" src="img/user.jpg" alt="头像">
			        <h5 class="self-text-color">博客</h5>
				</div>
				<div class="col-xs-6 col-xs-offset-3 text-center aside-gzh animated fadeInLeftBig">
					<h5 class="self-text-color">公众号</h5>
					<img class="img-responsive" src="img/ewm.jpg" alt="公众号">  
					<h5 class="self-text-color">小程序</h5>
					<img class="img-responsive" src="img/jiakao.jpg" alt="公众号">  
				</div>
			</div>
		</aside>
		<section id="section">
			<div class="control-btn">
				<label for="asideControler" id="toggleBtn" class="btn btn-success btn-sm toggle-btn hidden-xs">
					<span class="toggle-btn1"></span>
					<span class="toggle-btn2"></span>
					<span class="toggle-btn3"></span>
				</label>
			</div>
			<iframe class="main" id="main" src=""></iframe>
		</section>
		<script>
			function getPage (_this,url){
				$('#main').attr('src',url);
				$('#navList').find('li').removeClass('active');
				$(_this).parent('li').addClass('active');
			}
			$(function(){
				getPage(this,'page/home.html');
			})
		</script>
	</body>
</html>
